<template>
  <div class="foot">
         <ul>
            <li :class="{on: '/msite'===$route.path}"  @click="goTo('/msite')">
                <a class="iconfont icon-icon_new_recruit_fil fco"></a>
                <br>
                <span>主  页</span>
            </li>
            <li :class="{on: '/shujia'===$route.path}"  @click="goTo('/shujia')">
               <a class="iconfont icon-icon_study_fill "></a>
                <br>
                <span>书  架</span>
            </li>
             <li :class="{on: '/category'===$route.path}"  @click="goTo('/category')">
                <a class="iconfont icon-icon_star_fill"></a>
                <br>
                <span>分类</span>
            </li>
            <li :class="{on: '/wode'=== $route.path}"  @click="goTo('/wode')">
                <a class="iconfont icon-icon_people_fill"></a>
                <br>
                <span>我  的</span>
            </li>
        </ul>
    </div>
</template>

<script>

export default {
  methods: {
    goTo (path) {
      this.$router.replace(path)
    }
  }
}
</script>
<style scoped>

.iconfont{
    font-size: 20px;
}
ul li{
    color: rgb(94, 91, 91);
}
.on{
    color: #1296db;
}
.foot ul{
    padding-top: 15px;
    width: 100%;
    height: 3rem;
    border-top: rgb(240, 237, 237) 1px solid;
    background-color: rgb(252, 252, 252);
    position: fixed;
    bottom: -2px;
    z-index: 55;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
ul,li{
    list-style: none;
}
.foot ul li {
    width: 20%;
    height: 100%;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
}

</style>
